<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8,支持中文等字符 -->
    <title>WebSocket 聊天室</title>
    <style>
        /* 聊天室的整体容器样式 */
        #chat-container {
            width: 600px; /* 设置容器宽度 */
            margin: 0 auto; /* 容器居中显示 */
            padding: 20px; /* 内边距 */
        }
        /* 消息显示区域的样式 */
        #message-container {
            height: 400px; /* 设置高度 */
            border: 1px solid #ccc; /* 添加边框 */
            margin-bottom: 20px; /* 下方外边距 */
            padding: 10px; /* 内边距 */
            overflow-y: auto; /* 内容超出时显示垂直滚动条 */
        }
        /* 输入区域容器样式 */
        #input-container {
            display: flex; /* 使用弹性布局 */
            gap: 10px; /* 元素之间的间距 */
        }
        /* 文本输入框样式 */
        input[type="text"] {
            flex: 1; /* 自动占据剩余空间 */
            padding: 5px; /* 内边距 */
        }
        /* 按钮样式 */
        button {
            padding: 5px 15px; /* 内边距 */
        }
    </style>
</head>
<body>
    <!-- 聊天室主体结构 -->
    <div id="chat-container">
        <!-- 消息显示区域 -->
        <div id="message-container"></div>
        <!-- 输入区域 -->
        <div id="input-container">
            <input type="text" id="name-input" placeholder="你的名字">
            <input type="text" id="message-input" placeholder="输入消息">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>

    <script>
        // 创建WebSocket连接
        // ws://localhost:8765 是WebSocket服务器的地址
        const ws = new WebSocket('ws://localhost:8765');
        
        // 获取页面上的DOM元素，方便后续操作
        const messageContainer = document.getElementById('message-container'); // 消息容器
        const messageInput = document.getElementById('message-input'); // 消息输入框
        const nameInput = document.getElementById('name-input'); // 用户名输入框

        // 处理接收到的WebSocket消息的事件处理函数
        ws.onmessage = function(event) {
            // 将接收到的JSON格式字符串解析为JavaScript对象
            const data = JSON.parse(event.data);
            
            // 创建新的段落元素来显示消息
            const messageElement = document.createElement('p');
            // 设置消息内容，格式为："发送者: 消息内容"
            messageElement.textContent = `${data.sender}: ${data.message}`;
            
            // 将新消息添加到消息容器的末尾
            messageContainer.appendChild(messageElement);
            
            // 自动滚动到最新消息
            // scrollHeight是内容的总高度，将scrollTop设置为scrollHeight可以滚动到底部
            messageContainer.scrollTop = messageContainer.scrollHeight;
        };

        // 发送消息的函数
        function sendMessage() {
            // 获取输入的消息和发送者名称，并去除首尾空格
            const message = messageInput.value.trim();
            // 如果没有输入名字，默认显示'Anonymous'
            const sender = nameInput.value.trim() || 'Anonymous';
            
            // 检查消息是否为空
            if (message) {
                // 将消息对象转换为JSON字符串并发送
                ws.send(JSON.stringify({
                    sender: sender, // 发送者
                    message: message // 消息内容
                }));
                
                // 发送后清空消息输入框
                messageInput.value = '';
            }
        }

        // 监听消息输入框的键盘事件
        messageInput.addEventListener('keypress', function(e) {
            // 当按下回车键时
            if (e.key === 'Enter') {
                // 触发发送消息函数
                sendMessage();
            }
        });
    </script>
</body>
</html> 